<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mine</title>
</head>

<body>
    <main>
        <!-- 用户头像&用户名&用户签名 -->
        <div class="top">
            <!-- 头像 -->
            <div class="avatar-box">
                <!-- 头像 -->
                <div class="avatar mr16">
                    <img src="../img/user-img.jpg" id="avatarImg" alt="">
                    <!-- 头像上传 -->
                    <input type="file" id="upAvatar">
                </div>
                <!-- 用户名 -->
                <p id="user" class="fz22">用户名</p>
                <i class="iconfont iconarrow-right fz22"></i>
            </div>
            <!-- 用户签名 -->
            <p class="sgin-name mt20">个性签名:<span id="sginName"> 这个人很懒，啥都没有写</span> </p>
        </div>
        <!-- 分割条 -->
        <p class="division"></p>
        <!-- 个人动态 -->
        <div class="dynamic ">
            <!-- 个人动态 -->
            <div class="dys"><i class="iconfont icondynamic"></i>
                <p class=" ml12">个人动态</p>
            </div>
            <!-- 动态条数 -->
            <div class="dys"><span id="dynamicCount">--</span>条 <i class="iconfont iconarrow-right"></i></div>
        </div>
        <!-- 分割条 -->
        <p class="division"></p>
        <!-- 运动数据 -->
        <div class="rundata">
            <!-- 标题 -->
            <div class="tit">
                <p><i class="iconfont iconchart mr6"></i>运动数据</p>
                <i class="iconfont iconarrow-right" id="motionDataBtn"></i>
            </div>
            <!-- 总运动 -->
            <div class="run-sum ">
                <!-- 左边 -->
                <div class="left">
                    <p>总运动</p>
                    <p class="mt40"><span id="time">--</span>分钟</p>
                </div>
                <!-- 右边 -->
                <div class="right">
                    <p>本周消耗</p>
                    <p class="mt40"><span id="powr">--</span>千卡</p>
                </div>
            </div>
        </div>
        <!-- 分割条 -->
        <p class="division"></p>
        <!-- 运动徽章 -->
        <div class="badge" id="iconbadge">
            <div class="dys">
                <i class="iconfont iconbadge"></i>
                <p class="ml12">运动徽章</p>
            </div>
            <i class="iconfont iconarrow-right"></i>
        </div>
        <!-- 分割条 -->
        <p class="division"></p>
        <!-- 退出登录 -->
        <div class="back" id="back">退出登录</div>
        <!-- 分割条 -->
        <p class="division"></p>
    </main>
</body>

</html>